<template>
  <div>
    <nav-top class="mnavtop" :menu_index="1"></nav-top>
    <!-- 微信定制开发 -->
    <div class="customized_wx">
      <div class="customized_top">
        <h2>微信定制开发</h2>
        <p>全新的用户体验 效果堪比原生APP</p>
      </div>
      <div class="customized_bot">
        <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/WX/wx1.png" alt />
        <span>
          微信开发即微信公众平台开发，将企业信息、服务、
          活动等内容通过微信网页的方式进行表现，用户通过简单的设置
          ，就能生 成微信3G网站。通过微信公众平台将企业品牌展示给微信用户，
          减少宣传成本，建立企业与消费者、客户的一对一互动和沟通，
          将 消费者接入企业CRM系统，进行促销、推广、宣传、售后等。
          形成了一种主流的线上线下微信互动营销方式。
        </span>
      </div>
    </div>
    <!-- 小程序是什么 -->
    <div :class="['wx_program',program_flag?'wx_program_active':'']">
      <div class="program_top">
        <h2>小程序是什么</h2>
        <p>
          小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦 想，
          用户扫一扫或者搜一下即可打开应用体现了“用完即走”的理念，用户不用关心
          是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
        </p>
      </div>
      <div :class="['program_bot',program_b_flag?'pro_b_active':'']">
        <div class="con"></div>
        <div class="con_b">
          <div class="down" v-for="(item,key) in lz" :key="key">
            <img v-lazy="item.src" class="news-cover" />
            <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/WX/xz1.png" alt /> -->
            <span>无需下载</span>
          </div>
          <div class="money">
            <img v-lazy="money[0]" class="news-cover" />
            <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/WX/ll1.png" alt /> -->
            <span>流量红利</span>
          </div>
          <div class="reduce">
            <img v-lazy="money[1]" class="news-cover" />
            <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/WX/mk1.png" alt /> -->
            <span>降低门槛</span>
          </div>
          <div class="cost">
            <img v-lazy="money[2]" class="news-cover" />
            <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/WX/cb1.png" alt /> -->
            <span>开发成本</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 小程序功能特点 -->
    <div :class="['function',function_flag?'function_active':'']">
      <h2>小程序功能特点，获客营销快人一步</h2>
      <ul :class="['fun_b',fun_b_flag?'fun_b_active':'']">
        <li>
          <div class="pic">
            <!-- <img class="pic_o" v-lazy="funone[0]" alt />
            <img class="pic_t" v-lazy="funone[1]" alt /> -->
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/1.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/21.png" alt />
          </div>
          <h5>二维码</h5>
          <p>扫码方便，无需下载，小体积不占内存</p>
        </li>
        <li>
          <div class="pic">
            <!-- <img class="pic_o" v-lazy="fun[0].pic_o" alt />
            <img class="pic_t" v-lazy="fun[0].pic_t" alt /> -->
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/2.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/22.png" alt />
          </div>
          <h5>关联微信公众号</h5>
          <p>对接内容营销，提高用户转化率</p>
        </li>
        <li>
          <div class="pic">
            <!-- <img class="pic_o" v-lazy="fun[1].pic_o" alt />
            <img class="pic_t" v-lazy="fun[1].pic_t" alt /> -->
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/3.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/23.png" alt />
          </div>
          <h5>附近小程序</h5>
          <p>对接线上方圆五公里线上用户， 附近门店服务等</p>
        </li>
        <li>
          <div class="pic">
            <!-- <img class="pic_o" v-lazy="fun[2].pic_o" alt />
            <img class="pic_t" v-lazy="fun[2].pic_t" alt /> -->
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/4.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/24.png" alt />
          </div>
          <h5>好友分享</h5>
          <p>推荐小程序给好友，高效品牌传播</p>
        </li>
        <li>
          <div class="pic">
            <!-- <img class="pic_o" v-lazy="fun[3].pic_o" alt />
            <img class="pic_t" v-lazy="fun[3].pic_t" alt /> -->
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/5.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/25.png" alt />
          </div>
          <h5>消息提醒</h5>
          <p>对接小程序消息模板，业务在线提醒更方便</p>
        </li>
        <li>
          <div class="pic">
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/6.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/26.png" alt />
          </div>
          <h5>LBS地图服务</h5>
          <p>线上线下，无缝对接;众多入口，引流便捷</p>
        </li>
        <li>
          <div class="pic">
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/7.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/27.png" alt />
          </div>
          <h5>客户积累</h5>
          <p>小程序提高方便客户沉淀，提升客户服务</p>
        </li>
        <li>
          <div class="pic">
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/8.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/28.png" alt />
          </div>
          <h5>快速访问</h5>
          <p>
            访问速度，优于H5功能更新，
            迭代迅速
          </p>
        </li>
      </ul>
    </div>
    <!-- 小程序的优势式什么 -->
    <div :class="['yous',yous_flag?'yous_active':'']">
      <div class="yous_top">
        <h2>小程序的优势是什么</h2>
        <p>因为我们是与众不同的，所以你也可以像我们一样</p>
      </div>
      <div class="yous_bot" id="box">
        <ul>
          <li @mouseover="changeStyle(key)" v-for="(item,key) in you_list" :key="key" :style="item.long ? 'width:600px;background-image:url('+item.bg_lg+')' : 'width:180px;background-image:url('+item.bg_sm+')'">
            <span>{{item.title}}</span>
            <h3>{{item.name}}</h3>
            <p v-show="item.long">{{item.memo}}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 那些大咖选择我们 -->
    <!-- <div class="wx_bigShot">
      <div class="wx_bigShot_top">
        <h2>有哪些行业大咖选择我们</h2>
        <p>我们追求完美的创意设计和用户体验，更关注您的满意</p>
      </div>
      <div class="wx_bigShot_bot">
        <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
          <ul class="item">
            <li v-for="(item,index) in newsList" :key="index">
              <img :src="item.src" alt="">
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>-->
    <shot></shot>
    <!-- <contact></contact> -->
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import navTop from '../Components/nav-one'
import shot from '../Components/shot'
import contact from '../Components/contact'

export default {
  components: {
    swiper,
    swiperSlide,
    navTop,
    shot,
    contact
  },
  computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 6,
        hoverStop: true, //是否开启鼠标悬停stop
        openWatch: true, //开启数据实时监控刷新dom
        singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 //单步运动停止的时间(默认值1000ms)
      }
    }
  },
  data() {
    return {
      // 实现懒加载效果
      lz: [{ src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/10.png' }],
      money: [
        'https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/11.png',
        'https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/9.png',
        'https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/12.png'
      ],
      funone: [
        'https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/31.png',
        'https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/32.png'
      ],
      fun: [
        {
          pic_o: 'https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/33.png',
          pic_t: 'https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/34.png'
        },
        {
          pic_o: 'https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/35.png',
          pic_t: 'https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/36.png'
        },
        {
          pic_o: 'https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/37.png',
          pic_t: 'https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/38.png'
        },
        {
          pic_o: 'https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/39.png',
          pic_t: 'https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/40.png'
        }
      ],
      program_b_flag: false, //小程序下
      yous_flag: false, // 优势滚动特效
      function_flag: false, //小程序功能特点特效
      fun_b_flag: false, // 小程序下
      program_flag: false, //小程序特效
      scroll: 0, // 滚动距离
      you_list: [
        {
          title: '优势一',
          name: '丰富的引流入口',
          memo: '微信信首页任务栏等60+小程序入口，让11亿用户轻松发现你',
          long: true,
          bg_sm: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/95.png',
          bg_lg: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/91.png'
        },
        {
          title: '优势二',
          name: '促销活动引爆销量',
          memo: '公众号、小程序、微信群互联互通，流量变现快速高效',
          long: false,
          bg_sm: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/96.png',
          bg_lg: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/92.png'
        },
        {
          title: '优势三',
          name: '即时提醒',
          memo: '产生新订单微信即时发送提醒，无需额外运营成本，轻松管理。',
          long: false,
          bg_sm: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/97.png',
          bg_lg: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/93.png'
        },
        {
          title: '优势四',
          name: '营销新工具',
          memo: '适用B2B、B2C各类不同行业做服务营销，是获取目标客户的营销新工具',
          long: false,
          bg_sm: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/98.png',
          bg_lg: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/94.png'
        }
      ],
      swiperOption2: {
        notNextTick: true,
        loop: true,
        slidesPerView: 6,
        spaceBetween: 20,
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        slidesOffsetBefore: -70,
        pagination: {
          el: '.swiper-pagination'
        },
        // pagination: ".swiper-pagination",
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    // 判断是否出现在视口中
    elementInView() {
      // var wx_program = document.getElementsByClassName('wx_program')[0]
      // let wx_top = wx_program.getBoundingClientRect().top
      // let wx_bot = wx_program.getBoundingClientRect().bottom
      // if (wx_bot >= 0 && wx_top <= window.innerHeight) {
      //   this.program_flag = true
      // } else {
      //   this.program_flag = false
      // }
      // var program_bot = document.getElementsByClassName('program_bot')[0]
      // let pb_top = program_bot.getBoundingClientRect().top
      // let pb_bot = program_bot.getBoundingClientRect().bottom
      // if (pb_bot >= 0 && pb_top <= window.innerHeight) {
      //   this.program_b_flag = true
      // } else {
      //   this.program_b_flag = false
      // }
      // var fun = document.getElementsByClassName('function')[0]
      // let fun_top = fun.getBoundingClientRect().top
      // let fun_bot = fun.getBoundingClientRect().bottom
      // if (fun_bot >= 0 && fun_top <= window.innerHeight) {
      //   this.function_flag = true
      // } else {
      //   this.function_flag = false
      // }
      // var funb = document.getElementsByClassName('fun_b')[0]
      // let funb_top = funb.getBoundingClientRect().top
      // let funb_bot = funb.getBoundingClientRect().bottom
      // if (funb_bot >= 0 && funb_top <= window.innerHeight) {
      //   this.fun_b_flag = true
      // } else {
      //   this.fun_b_flag = false
      // }
      // var yous = document.getElementsByClassName('yous')[0]
      // let yous_top = yous.getBoundingClientRect().top
      // let yous_bot = yous.getBoundingClientRect().bottom
      // if (yous_bot >= 0 && yous_top <= window.innerHeight) {
      //   this.yous_flag = true
      // } else {
      //   this.yous_flag = false
      // }
      // var rect = wx_program.getBoundingClientRect();
      // var viewportHeight = Math.max(
      //   // document.documentElement.clientHeight,
      //   document.body.clientHeight
      // );
      // // console.log(rect)
      // var { top, bottom } = rect;
      // if (bottom > 0 && top < viewportHeight) {
      // }
      // console.log(wx_program.offsetTop)
    },
    // 计算滚动距离
    handleScroll(e) {
      // this.elementInView();
      this.scroll = this.scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop // 执行代码
      // console.log(this.scroll)
      if (this.scroll > 240) {
        this.program_flag = true
      }
      if (this.scroll > 470) {
        this.program_b_flag = true
      }

      if (this.scroll > 900) {
        this.function_flag = true
      }
      if (this.scroll > 1150) {
        this.fun_b_flag = true
      }
      if (this.scroll > 1400) {
        this.yous_flag = true
      }
    },
    changeStyle(key) {
      for (var i in this.you_list) {
        this.you_list[i].long = false
      }
      this.you_list[key].long = true
      console.log(key)
    }
  }
}
</script>

<style scoped>
@import url('../../assets/css/WX/index.css');
@import url('../../assets/css/WX/mindex.css');
</style>